<template>
	<view class="bg" style="height: 100vh;">
		<u-navbar title="AI绘画" bgColor="transparent" autoBack placeholder></u-navbar>
		<view class="content">
			<view class="df cTop box">
				<view class="">
					剩余绘画次数
				</view>
				<view class="bold">
					{{vuex_userInfo.draw_number}}次
				</view>
			</view>

			<view class="box Center">
				<view class="bold">
					绘画风格
					<view class="line"></view>
				</view>
				<view class="list">
					<view class="sortBox" :class="idx == cur ? 'act' : ''" v-for="(i, idx) in list" :key="i.value"
						@click="setStyle(i, idx)">
						{{ i.label }}
					</view>
				</view>
			</view>

			<view class="box tbottom">
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="500">
					<u-form-item label="文本描述" prop="userInfo.describe" required ref="item1">
						<u--textarea autoHeight count maxlength="500" v-model="model1.userInfo.describe"
							placeholder="请输入文本描述"></u--textarea>
					</u-form-item>

					<u-form-item label="尺寸分辨率" prop="userInfo.size" required ref="item1">
						<div class="list jb">
							<div class="sortBox rslt" :class="idx == model1.userInfo.size ? 'act' : ''" v-for="(i, idx) in actions"
								:key="i" @click="model1.userInfo.size=idx">
								{{ i }}
							</div>
						</div>
					</u-form-item>

					<u-form-item label="反向描述" ref="item1">
						<u--textarea autoHeight count maxlength="500" v-model="model1.userInfo.describe1"
							placeholder="请输入反向描述"></u--textarea>
					</u-form-item>
				</u--form>
			</view>
		</view>

		<u-popup :show="!!imgSrc" :round="10" mode="center" closeable @close="imgSrc=''">
			<view class="over-hidden" style="border-radius: 10px 10px 0 0;">
				<u--image :src="imgSrc" width="300px" height="500px" mode="aspectFit">
					<template v-slot:loading>
						<u-loading-icon></u-loading-icon>
					</template>
				</u--image>
				<view class="df" style="margin: 20rpx 26rpx;">
					<u-button style="width:48%;margin:0" type="primary" text="保存背景" @click="save"></u-button>
					<u-button style="width:48%;margin:0" type="success" text="点击下载" @click="download"></u-button>
				</view>
			</view>
		</u-popup>

		<view class="btnBox">
			<view class="btn btn1 cfff" @click="draw">
				点击生成绘图
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgImg: `background:url(${this.$img}bg.png) no-repeat`,
				show: false,
				showSize: false,
				drawNum: 99,
				cur: null,
				model1: {
					userInfo: {
						size: 0,
						describe: '',
						describe1: '',
					},
				},
				list: [{
						label: "水墨画",
						value: 101,
					},
					{
						label: "概念艺术",
						value: 102,
					},
					{
						label: "油画1",
						value: 103,
					},
					{
						label: "水彩画",
						value: 104,
					},
					{
						label: "油画2（梵高）",
						value: 118,
					},
					{
						label: "像素画",
						value: 105,
					},
					{
						label: "厚涂风格",
						value: 106,
					},
					{
						label: "插图",
						value: 107,
					},
					{
						label: "剪纸风格",
						value: 108,
					},
					{
						label: "印象派1（莫奈）",
						value: 109,
					},
				],
				actions: ['1:1 (768:768)', '3:4 (768:1024)', '4:3 (1024:768)'],
				rules: {
					'userInfo.describe': {
						type: 'string',
						required: true,
						message: '请填写文本描述',
						trigger: ['blur']
					},
					'userInfo.size': {
						type: 'number',
						required: true,
						message: '请选择尺寸分辨率',
						trigger: ['blur']
					}
				},
				imgSrc: '',
			};
		},
		methods: {
			setStyle(i, idx) {
				this.styles = i.value;
				this.cur = idx;
			},
			draw() {
				if (!this.styles) {
					uni.$u.toast('请选择绘画风格')
					return
				}
				uni.showLoading({
					title: '绘画生成中'
				});
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					let data = {
						styles: this.styles,
						text: this.model1.userInfo.describe,
						oppositetext: this.model1.userInfo.describe1,
						type: this.model1.userInfo.size + 1
					}
					this.$api.draw(data).then(res => {
						uni.hideLoading()
						// uni.$u.toast(res.msg)
						this.imgSrc = res.data.url
					})
				}).catch(errors => {
					console.log(errors);
					// uni.$u.toast('校验失败')
				})
			},
			save() {
				this.$api.preserve_draw({
					url: this.imgSrc
				}).then(res => {
					uni.$u.toast(res.msg)
				})
			},
			download() {
				uni.downloadFile({
					url: this.imgSrc, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.$u.toast('已保存至相册')
								}
							});
						}
					}
				});
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		overflow-x: hidden;

		.box {
			border-radius: 16rpx;
			// box-shadow: 0px 4px 10px rgba(20, 111, 255, 0.04);
			box-shadow: 1px 2px 10px rgba(20, 111, 255, 0.09);
			background: #fff;
		}

		.list {
			border-radius: 100px;
			display: flex;
			flex-wrap: wrap;

			.sortBox {
				border-radius: 32rpx;
				background: #f1f4f5;
				padding: 3px 8px;
				margin-right: 5px;
				margin-top: 8px;
				color: #214CFB;
				color: #5882ff;
				// box-shadow: 0px 1px 5px #bdd3ed;
			}

			.act {
				border: 1px solid #214CFB;
			}

			.rslt {
				width: 170rpx;
				font-size: 26rpx;
				text-align: center;
				border-radius: 16rpx;
				margin-right: 16rpx;
				padding: 12rpx 16rpx;
				background: #f7fafc;
				color: #666;
			}

			.rslt:last-child {
				margin-right: 0px;
			}
		}

		.cTop {
			padding: 20px 13px;
			color: #666;
		}

		.Center {
			margin: 30rpx 0;
			padding: 24rpx;
			color: #505050;

			.line {
				width: 59px;
				height: 5px;
				border-radius: 8px;
				transform: rotate(180deg);
				background: linear-gradient(219.46deg, rgba(0, 46, 250, 1) 0%, rgba(111, 173, 255, 0) 100%);
			}
		}

		.tbottom {
			padding: 10rpx 26rpx 40rpx;
		}
	}

	.btnBox {
		position: fixed;
		bottom: 0;
		width: 100vw;
		left: 0vw;
		background: #f7fbfe;
		z-index: 10;
		display: flex;
		justify-content: space-between;

		.btn {
			margin: 20rpx auto;
			width: 80vw;
			background: #f5f7fa;
			border-radius: 20rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
		}

		.btn1 {
			background-color: #6a8bff;
		}
	}

	::v-deep {
		.u-form-item__body {
			flex-wrap: wrap !important;
		}

		.u-form-item__body__right__message {
			margin: 0 !important;
		}

		.u-form-item__body__left {
			margin-bottom: 20rpx !important;
		}

		.u-form-item__body__left {
			// font-weight: 700;
		}



		.u-input {
			background: #f7fafc !important;
			padding: 20rpx 26rpx !important;
		}

		.u-subsection--button {
			height: 84rpx !important;
			padding: 8rpx !important;
		}
	}
</style>